<!--
    A deck of playing cards.
-->
<link rel="import" href="card-collection-element.html">
<element name="card-deck" extends="card-collection-element" attributes="remaining cards showRemaining compact">
  <template>
    <style>
    #stack {
        position: relative;
    }

    #stack card-card {
      display: block;
    }
    #stack card-card:nth-child(2) {
	margin-top:-140%;
	margin-left:10%;
    }
    #stack card-card:nth-child(3) {
	margin-top:-140%;
	margin-left:20%;
    }

    #stack p {
        text-align:center;
        bottom: 0;
    }
    </style>
	<template bind if="{{ showRemaining }}"><p id="remainingLabel">{{remaining}} cards remaining</p></template>
  </template>
  <script>
    Polymer.register(this, {
        remaining: 52,
        multipleRemaining: true,
        showRemaining: true,
        compact: true,
        allVisible: false,
        cardsChanged: function() {
            this.updateRemaining();
        },
        dealHand: function(count) {
          cards = this.cards.splice(0, count);
          this.updateRemaining();
          return cards;
        },
        drawCard: function() {
          return this.dealHand(1)[0];
        },
        shuffle: function() {
            // Boldly copied from Closure:
            var randFn = Math.random;
            for (var i = this.cards.length - 1; i > 0; i--) {
                var j = Math.floor(randFn() * (i + 1));
                var tmp = this.cards[i];
                this.cards[i] = this.cards[j];
                this.cards[j] = tmp;
            }
        },
        newDeck: function() {
            var deck = [];
            var suits = ['diamonds', 'clubs', 'spades', 'hearts'];
            suits.forEach(function(suit) {
                for (var value = 1; value < 14; ++value) {
                    deck.push({value:value, suit:suit, faceup:true});
                }
            });
            return deck;
        },
        updateRemaining: function() {
          this.remaining = this.cards.length;
          this.multipleRemaining = this.cards.length > 1;
          this.singleRemaining = this.cards.length == 1;
          this.noneRemaining = this.cards.length < 1;
          this.visibleCards = this.cards.slice(0, 3);
        },
        reset: function() {
            this.cards = this.newDeck();
            this.updateRemaining();
        },
        ready: function() {
            this.reset();
        }
    });
  </script>
</element>
